<template>
  <div class="yq-home">
    <yq-userinfo :style="style.userinfo"></yq-userinfo>
    <yq-article-chart :style="style.chart"></yq-article-chart>
  </div>
</template>

<script>
import yqUserInfo from './YqUserInfo';
import yqArticleChart from './YqArticleChart';

export default {
  name: "yqHome",
  data() {
    return {
      screenWidth: document.body.clientWidth,
      style: {
        userinfo: {
          width: '30%',
          height: '100%'
        },
        chart: {
          width: '70%',
          height: '100%'
        }
      }
    }
  },
  watch: {
    screenWidth (width) {
      this.changeScreenWidth(width);
    },
  },
  methods: {
    changeScreenWidth(width) {
      if (width > 900) {
        this.style.userinfo.width   = '30%';
        this.style.userinfo.height  = '100%';
        this.style.chart.width      = '70%';
        this.style.chart.height     = '100%';
        this.style.chart.visibility = 'visible';
      } else {
        this.style.userinfo.width   = '100%';
        this.style.userinfo.height  = '100%';
        this.style.chart.width      = '0%';
        this.style.chart.height     = '100%';
        this.style.chart.visibility = 'hidden';
      }
    }
  },
  activated() {
    console.log('home')
    const that = this;
    window.addEventListener('resize',() => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    });
    this.changeScreenWidth(this.screenWidth);
  },
  components: {
    'yq-userinfo': yqUserInfo,
    'yq-article-chart': yqArticleChart
  }
}
</script>

<style scoped lang="scss">
.yq-home {
  @include box(100%, 100%);
  @include flex(row, center, center);
  box-shadow: 0 0 10px #24272c;
  background-image: linear-gradient(to bottom right, #3e464e, #0c0c11);
}
</style>